<template>
	<view class="container" style="margin-bottom:25%;">
		<!-- 头部轮播 -->
		<view>
			<!-- 轮播 -->
			<swiper class="swiper" indicator-dots="indicatorDots" autoplay="autoplay" circular="circular"
				interval="2500">
				<template v-if="baseUrl">
					<swiper-item v-for="item in swiperList" :key="item.id">
						<image lazy-load :src="item.image" mode="widthFix"></image>
					</swiper-item>
				</template>
			</swiper>
		</view>
		<view class="typeStyleWrapper">
			<view v-for="(pt,index) in playType" class="typeStyle" @tap="choosePlayType(index,pt.id)">
				<view style="width: 80rpx;text-align: center;">
					<image :src="pt.icon" mode="widthFix" class="pwTypeImg"></image>
				</view>
				<view style="color: #595959;font-size: 30rpx;">
					{{pt.name}}
				</view>
			</view>
		</view>

		<view style="display: flex;margin: 20rpx auto;justify-content: space-between;width: 90%;">
			<view style="font-size: 38rpx;font-weight: 600;">推荐</view>
			<view>{{ipAddress.city}}市</view>
		</view>
		<!-- 	<view>{{userInfo.nickname}}</view> -->
		<view class="sortOrder">
			<view :class="[sortIndex==item.id?'sortType':'']" v-for="(item,index) in sortType"
				@tap="changeSortType(item.id)">
				{{item.name}}
			</view>
		</view>
		<view class="card" v-for="(item,index) in playList" @tap="placeOrder(item)">
			<view style="flex: 1;display: flex;flex-direction: column;align-items: center;">
				<view>
					<image v-show="item.images[0].imgLoaded" lazy-load :src="item.images[0].url" mode="aspectFill" class="pwHeadImg"
						@load="changeImg(index)" @error="badImg(index)"></image>
					<image v-show="!item.images[0].imgLoaded" src="../../static/image/loading.gif"
						mode="aspectFill" class="pwHeadImg"></image>
				</view>
				<view>
					<view v-if="item.is_server" class="serviceState serviceState_ok">可服务</view>
					<view class="serviceState serviceState_error" v-else>暂不服务</view>
				</view>
			</view>
			<view class="pw_note">
				<view class="pw_detail">
					<view class="pw_detail_items">
						<view class="pw_detail_nickname">{{item.nickname}}</view>
						<view class="pw_detail_gender">
							<text v-if="item.sex=='男'" class="iconfont icon-nanxing1" style="color: #1F91F2;"></text>
							<text v-if="item.sex=='女'" class="iconfont icon-nanxing" style="color: #FF84A1;"></text>
							{{item.age}}
						</view>
					</view>
					<view>
						<view v-if="item.city">
							<text class="iconfont icon-weizhi" style="color: #1AD566"></text>
							<text style="font-size: 28rpx;">{{item.city}}</text>
						</view>
					</view>

				</view>
				<!-- 距离 -->
				<view v-if="item.distance" style="text-align: right;color: #595959;">
					距您 <text style="font-size: 28rpx;">{{item.distance}}</text>
				</view>
				<view class="pw_detail">
					<view style="flex: 2;">
						<view v-if="item.details">
							{{item.details}}
						</view>
						<view v-else>
							<view>{{item.conste}}</view>
							<view>{{item.intro}}</view>
						</view>
					</view>

					<view class="priceBox">
						<view class="priceWrapper">
							<image src="/static/image/cbnew.png" mode="widthFix" style="width: 52rpx;">
							</image>
							<text class="priceWrapper_value">{{item.price}}</text> /小时
						</view>
						<view>{{item.start_hour}}小时起</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="showEnd" style="padding: 20px;text-align: center;color: #959090;">到底了哦,亲~</view>
		
		<template v-if="oneShow">
			<view class="index_one">
				<view class="index_one_title">下单必填</view>
				<view class="index_one_con">需要先添加<text>联系方式</text>，才能和Ta愉快的玩耍</view>
				<view class="index_one_foot flex flex--align-items--center flex--justify-content--space-between">
					<view class="index_one_foot_left" @tap="oneShow = false">不需要</view>
					<view class="index_one_foot_right" @tap="goAddWeixi">去添加联系方式</view>
				</view>
			</view>
		</template>
	</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'hallList',
		data() {
			return {
				oneShow: false,
				sortType: [{
					id: 0,
					name: "综合",
					sort: false
				}, {
					id: 1,
					name: "价格",
					sort: false
				}, {
					id: 2,
					name: "时长",
					sort: false
				}],
				sortIndex: 0
			}
		},
		props: {
			ipAddress: {
				type: Object
			},
			playType: {
				type: Array
			},
			swiperList: {
				type: Array
			},
			playList: {
				type: Array
			},
			address: {
				type: String
			},
			userInfo: {
				type: Object,
				required: true,
				default: {
					nickname: ''
				}
			},
			showEnd :{
				typeof:Boolean,
				default:false
			}
		},
		computed: {
			...mapState(['baseUrl'])
		},
		onLoad() {
			//this.getPlayList()
			console.log("==============================================")
			console.log(this.oneShow)
		},
		onReachBottom(){
			console.log("===============hallList页面onReachBottom===================")
		},
		methods: {
			changeImg(index) {
				this.$emit('imageLoad',index);
			},
			badImg(index){
				console.log("================第" + index + "张图片加载失败================")
				this.$emit('badImg',index);
			},
			choosePlayType(id, type) {
				//携带陪玩类型id去跳转
				uni.navigateTo({
					url: "/pages/playList/playList?playTypeId=" + id + '&&type=' + type
				})
			},
			changeSortType(id) {
				let data = {}
				data.id = id
				console.log("changeSortType" + id)
				this.sortIndex = id
				if (id == 0) {
					this.$emit("getSortPlayList", data)
				} else if (id == 1) {
					data.sort = this.sortType[id].sort
					this.$emit("getSortPlayList", data)
					this.sortType[id].sort = !this.sortType[id].sort
				} else {
					data.sort = this.sortType[id].sort
					this.$emit("getSortPlayList", data)
					this.sortType[id].sort = !this.sortType[id].sort
				}
			},
			async placeOrder(item) {
				if (!uni.getStorageSync('token')) {
					uni.showModal({
						title: '提示',
						content: '检测到您暂未登录',
						confirmText: "去登录",
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							} else if (res.cancel) {
								uni.showToast({
									title: '已取消',
									icon: "none",
									duration: 2000
								});
							}
						}
					});
					return
				}
				console.log("===================点得动===================")
				console.log(item)
				
				uni.setStorageSync("playUser", item)
				uni.navigateTo({
					url: "/pages/index/index?address=" + this.address
				})
				//const userInfo = await this.$http('/appapi/member/info');
			},
			// 去添加联系信息
			goAddWeixi() {
				let data = {
					address: this.cityText,
					data: this.date + ' ' + this.time,
					time: this.hour,
					do: this.checkboxText,
					price: this.moneyCon
				}
				this.$store.commit('setReleaseData', data);
				this.$emit('goAddWeixi', data)
			},
			async getPlayList() {
				const {
					data
				} = await this.$http('/appapi/play_with/lists')
				this.playList = data
				console.log(this.playList)
			},
		}
	}
</script>

<style lang="less" scoped>
	.pwTypeImg {
		width: 60rpx;
		box-sizing: border-box;
	}

	.pwHeadImg {
		width: 140rpx;
		height: 140rpx;
	}

	.sortOrder {
		border-radius: 30rpx;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		padding: 20rpx 20rpx 35rpx;
		width: 95%;
		box-sizing: border-box;
		font-size: 35rpx;
		margin: 20rpx auto;
	}

	.sortType {
		position: relative;
	}

	.sortType::after {
		content: "";
		display: block;
		position: absolute;
		width: 50rpx;
		height: 10rpx;
		background-color: #FA97B4;
		z-index: 999;
		top: 50rpx;
		left: 12%;
		// transform: translateX(10%);
	}

	.typeStyleWrapper {
		display: flex;
		flex-wrap: wrap;
		width: 98%;
		gap: 14rpx;
		margin: 40rpx auto;
		padding: 30rpx 0;
	}

	.typeStyle {
		width: 168rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.orderBtn {
		background-color: burlywood;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		color: #fff;
	}

	.card {
		background: #fff;
		box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
		width: 95%;
		margin: auto;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		display: flex;
		margin: 45rpx auto;
	}

	.index_one {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 999;
		padding: 68rpx;
		box-sizing: border-box;
		background: #fff;
		box-shadow: 0 -16rpx 288rpx -52rpx rgba(0, 0, 0, 0.50);
		border-radius: 50rpx 50rpx 0 0;

		.index_one_title {
			width: 186rpx;
			height: 46rpx;
			background: #FA97B4;
			line-height: 46rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
		}

		.index_one_con {
			text-align: center;
			font-size: 28rpx;
			margin-top: 88rpx;

			text {
				color: #FA97B4;
			}
		}

		.index_one_foot {
			margin-top: 90rpx;

			view {
				width: 300rpx;
				height: 89rpx;
				line-height: 89rpx;
				text-align: center;
				font-size: 36rpx;
				color: #fff;
				border-radius: 8rpx;
			}

			.index_one_foot_left {
				background: #cac5c5;
			}

			.index_one_foot_right {
				background: #FA97B4;
			}
		}
	}

	.container {
		background-color: #F8F8F8;
		min-height: 100vh;
	}

	.swiper {
		padding: 0 28rpx;
		height: 450rpx;
		border-radius: 54rpx;
		// overflow: hidden;

		swiper-item {
			height: 100%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				overflow: hidden;
			}
		}
	}
	.pw_note {
		flex: 3;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: revert;
	}

	.pw_detail {
		display: flex;
		justify-content: space-between;
		color: #595959;
	}

	.pw_detail_items {
		display: flex;
	}

	.pw_detail_nickname {
		font-size: 35rpx;
		font-weight: 700;
	}

	.pw_detail_gender {
		padding: 0 10rpx;
		margin: 5rpx 15rpx;
		background-color: #e8e7e4;
		border-radius: 15rpx;
		box-sizing: border-box;
	}

	.priceWrapper {
		font-size: 34rpx;
		white-space: nowrap;
		color: red;
		display: flex;
		flex-direction: unset;
		align-items: center;
	}

	.priceWrapper_value {
		font-size: 48rpx;
		font-weight: 700;
	}

	.priceBox {
		flex: 1;
		text-align: right;
	}

	.serviceState {
		padding: 6rpx 30rpx;
		border-radius: 30rpx;
		color: #fff;
		white-space: nowrap;
		font-size: 25rpx;
	}

	.serviceState_ok {
		background-color: #FF3F6E;
	}

	.serviceState_error {
		background-color: #cac5c5;
	}
</style>